<template>
  <div :class="['message-box', message.role]">
    <span class="err-icon" title="重新发送" v-if="message.status=='2'" @click="reSendMessage">
      <i class="el-icon-refresh-left"></i>
    </span>
    <div class="markdown-body content reasoning-content" v-if="message.reasoningContent">
      <div v-html="message.reasoningContent"></div>
    </div>
    <div class="markdown-body content" >
      <slot>
        <div v-html="renderedContent"></div>
      </slot>
    </div>
  </div>
</template>

<script>

const MarkdownIt = require('markdown-it');
const hljs = require('highlight.js');
const javascript = require('highlight.js/lib/languages/javascript');
hljs.registerLanguage('javascript', javascript);
const md = new MarkdownIt({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang }).value;
      } catch (__) {}
    }
    return ''; // 使用默认转义
  }
});
const DOMPurify = require('dompurify');

module.exports = {
  props: {
    //role: user/assistant/error
    // content: String
    message: Object
  },
  computed: {
    renderedContent() {
      return DOMPurify.sanitize(md.render(this.message.content))
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 添加代码块操作按钮
      this.addCodeActions();
    });
  },
  methods: {
    reSendMessage(){
      this.$emit('reSendMessage')
    },
    addCodeActions() {
      this.$el.querySelectorAll('pre code').forEach(codeBlock => {
        const codetool = document.createElement('div');
        codetool.className = 'code-tool-box';
        const btn1 = document.createElement('button');
        btn1.textContent = '复制';
        btn1.onclick = () => {
          this.$emit('copyCode', codeBlock.textContent);
        };
        codetool.appendChild(btn1)
        const btn2 = document.createElement('button');
        btn2.textContent = '插入编辑器';
        btn2.onclick = () => {
          this.$emit('insertCode', codeBlock.textContent);
        };
        codetool.appendChild(btn2)
        codeBlock.parentNode.appendChild(codetool);
      });
    }
  }
}
</script>

<style scoped lang="scss">
/* 消息气泡样式 */
.message-box {
  width: 100%;
  display: flex;
  margin: 12px 0;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}
.content {

}
.assistant{
  justify-content: flex-start;
  .content {
    width: 100%;
  }
}

.user{
  justify-content: flex-end;
  .err-icon{
    font-size: 14px;
    margin-right: 10px;
    display: inline-flex;
    width: 18px;
    height: 18px;
    border-radius: 100px;
    background-color: #ff6348;
    color: #fff;
    font-weight: bold;
    justify-content: center;
    align-content: center;
    align-items: center;
    cursor: pointer;
  }
  .content{
    max-width: 70%;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px 10px 0 10px;
    background-color: var(--liHoverBackground);
    flex: inherit;
  }
}

.reasoning-content{
  padding: 10px;
  box-sizing: border-box;
  font-size: 12px;
  opacity: 0.9;
}


</style>
